<template>
  <div class="form-item">
    <span v-if="label">{{ label }}</span>
    <slot></slot>
    <span v-if="errMessage">{{ errMessage }}</span>
  </div>
</template>
<script>
import Schema from "async-validator";
export default {
  name: "zf-form-item",
  inject: ["zfForm"],
  props: {
    label: {
      type: String,
      default: "",
    },
    props: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      errMessage: "",
    };
  },
  methods: {
    valitateForm() {
      if (this.props) {
        let value = this.zfForm.model[this.props];
        let ruleValue = this.zfForm.rules[this.props];
        // console.log(value, ruleValue);
        const validator = new Schema({
          [this.props]: ruleValue,
        });
        return validator.validate({ [this.props]: value }, (err, res) => {
          if (err) {
            this.errMessage = err[0].message;
          } else {
            this.errMessage = "";
          }
        });
      }
    },
  },
  mounted() {
    this.$on("validate", () => {
      // console.log("校验", this._uid);
      this.valitateForm();
    });
    // console.log(this);
  },
};
</script>
<style>
.form-item {
  display: flex;
}
</style>
